<!-- 组件模版 -->
<template>
  <div>
    <div v-if="info">
      <el-card class="mt20">
        <div class="fwb mb10">任务名称：</div>
        <div class="text-class">{{info.taskTitle}}</div>
        <div class="fwb mt30 mb10">背景信息:</div>
        <div class="text-class">{{info.backInfo}}</div>
        <div class="fwb mt30">子事项:</div>
        <div class="ml20">
          <div
            class="df mt20 aic jcsb"
            style="width:90%"
            v-for="(item,index) in info.staskItemList"
            :key="index"
          >
            <el-checkbox :value="item.taskItemStatus == 2">{{item.itemContent}}</el-checkbox>
            <i
              v-if="item.ossFileList && item.ossFileList.length > 0"
              class="el-icon-document"
              @click="preView(item.ossFileList)"
            ></i>
          </div>
        </div>
      </el-card>
      <el-card class="mt20">
        <div class="mt10 df aic">
          <i class="el-icon-user-solid c9"></i>
          <div class="fwb">协作人:</div>
        </div>
        <div class="ml20 df aic">
          <div class="mt10 tac mr30" v-for="(item,index) in info.staskItemList" :key="index">
            <el-avatar :size="60" :src="item.avatar"></el-avatar>
            <div>{{item.nickName}}</div>
          </div>
        </div>
        <div class="mt20 df aic" v-if="info.staskNoticeList && info.staskNoticeList.length > 0">
          <i class="el-icon-user-solid c9"></i>
          <div class="fwb">抄送人:</div>
        </div>
        <div class="ml20 df aic" v-if="info.staskNoticeList && info.staskNoticeList.length > 0">
          <div class="mt10 tac mr30" v-for="(item,index) in info.staskNoticeList" :key="index">
            <el-avatar :size="60" :src="item.avatar"></el-avatar>
            <div>{{item.nickName}}</div>
          </div>
        </div>
      </el-card>
      <el-card class="mt20">
        <div class="mt10 df aic">
          <div class="df aic">
            <i class="el-icon-eleme c9"></i>
            <div class="fwb">任务时间:</div>
          </div>
          <div
            class="ml20"
          >{{info.createTime ? info.createTime.substr(0,10) : '--'}} ~ {{info.endDate}}</div>
        </div>
        <div class="mt10 df aic">
          <div class="df aic">
            <i class="el-icon-s-flag c9"></i>
            <div class="fwb">重要紧急程度:</div>
          </div>
          <div class="ml20">{{info.urgent}}</div>
        </div>
      </el-card>
      <el-card class="mt20" v-if="info.ossFileList && info.ossFileList.length > 0">
        <div class="mt10 df aic">
          <div class="df aic">
            <i class="el-icon-eleme c9"></i>
            <div class="fwb">附件:</div>
          </div>
          <div class="ml10">
            <div class="df aic mt10" v-for="(item,index) in info.ossFileList" :key="index">
              <el-link :href="`${item.url}`" :underline="false" target="_blank">
                <span class="el-icon-document">{{ item.fileName }}</span>
              </el-link>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="mt20" v-if="info.remark">
        <div class="mt10 df aic">
          <div class="df aic">
            <i class="el-icon-s-flag c9"></i>
            <div class="fwb">备注:</div>
          </div>
          <div class="ml20">{{info.remark}}</div>
        </div>
      </el-card>
      <el-card class="mt20" v-if="info.taskStatus == 3">
        <div class="mt10 df aic">
          <div class="df aic">
            <i class="el-icon-s-flag c9"></i>
            <div class="fwb">对协助人客观评分:</div>
          </div>
        </div>
        <div class="mt20">
          <div class="df aic ml20" v-for="(item,index) in info.staskItemList" :key="index">
            <div>{{item.nickName}}</div>
            <div class="tac ml40">
              <el-rate disabled v-model="item.score"></el-rate>
              <div style="font-size:12px" class="c9 mt5">{{item.finishTime}}</div>
            </div>
            <div class="ml40">{{item.score}}分</div>
            <div class="ml40">留言：{{finishRemark}}</div>
          </div>
        </div>
      </el-card>
      <el-card class="mt20">
        <div class="mt10 df aic">
          <div class="df aic">
            <i class="el-icon-s-flag c9"></i>
            <div class="fwb">事件进展:</div>
          </div>
        </div>
        <div class="mt10 df aic">
          <el-table :data="info.progressionList" border style="width: 100%">
            <el-table-column prop="finishTimeStr" label="时间"></el-table-column>
            <el-table-column prop="nickName" label="人员"></el-table-column>
            <el-table-column prop="itemContent" label="事件"></el-table-column>
            <el-table-column prop="finishRemark" label="留言"></el-table-column>
            <el-table-column label="附件">
              <template slot-scope="scope">
                <el-button
                  @click="preView(scope.row.ossFileList)"
                  type="text"
                  v-if=" scope.row.ossFileList.length > 0"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <div v-else>暂无数据</div>
    <el-dialog title="附件" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <div class="df aic mt20" v-for="(item,index) in fileList" :key="index">
        <el-link :href="`${item.url}`" :underline="false" target="_blank">
          <span class="el-icon-document">{{ item.fileName }}</span>
        </el-link>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    info: {}
  },
  data() {
    return {
      fileList: [],
      dialogVisible: false
    };
  },
  methods: {
    preView(arr) {
      this.fileList = arr;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.text-class {
  margin-left: 20px;
}
</style>
